<template>
  <div>
    <el-card>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        label-position="right"
        ref="addRuleFormRef"
        :rules="addRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="栏目" prop="column">
              <el-select
                v-model="form.column"
                clearable
                placeholder="请选择栏目"
                style="width: 240px"
              >
                <el-option
                  v-for="item in columnOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="请选择开始时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                type="date"
                placeholder="请选择结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="每次生成数量" prop="amount" required>
              <el-input
                v-model="form.amount"
                placeholder="请输入每次生成数量"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="button_row">
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="onIndex(addRuleFormRef)">
                生成索引
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'

const addRuleFormRef = ref()
const form = ref({
  column: '',
  startDate: '',
  endDate: '',
  amount: ''
})
const addRules = reactive({
  amount: [{ required: true, message: '请输入每次生成数量', trigger: 'blur' }]
})
const columnOption = ref([
  { value: 'all', label: '全部栏目' },
  { value: 'new', label: '最新动态' }
])
// 生成栏目页html
const onIndex = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(form.value)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const getList = () => {}
getList()
</script>

<style lang="scss" scoped>
.el-card {
  min-height: 600px;
}
.button_row {
  text-align: center;
  margin-top: 30px;
}
</style>
